<template>
  <div class="mubao_list">
    <div class="mubao_list_search">
      <div class="search_box">
        <el-select
          style="width: 180px;"
          filterable
          v-model="featchData.gameGroupId"
          placeholder="请选择游戏分组"
        >
          <el-option
            v-for="item in groupsOption"
            :key="item.id"
            :label="item.name +'('+ item.id +')'"
            :value="item.id"
          >
            <span style="float: left">{{ item.label +'('+ item.id +')' }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box">
        <el-select
          style="width: 145px;"
          v-model="featchData.clientType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in typeOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
      <div class="search_box" v-if="roleType === '3'">
        <el-input
          style="width: 180px;"
          v-model="featchData.name"
          placeholder="请输入所属推广商"
        ></el-input>
      </div>
      <div class="search_box">
        <el-date-picker
          v-model="featchData.dateTime"
          style="width: 290px;"
          type="daterange"
          clearable
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div class="search_box">
        <el-input
          style="width: 180px;"
          v-model="featchData.query"
          placeholder="母包名称/创建人"
        ></el-input>
      </div>
      <div class="search_box">
        <el-button class="seach_btn" type="primary" style="height: 36px;" @click="searchData">搜索</el-button>
        <span @click="resetData()" class="reset_btn">重置</span>
      </div>
      <div style="margin-bottom: 16px;" v-if="roleType === '3'">
        <el-button style="height: 36px;" @click="createItem" type="primary">
          创建母包
        </el-button>
      </div>
    </div>
    <div class="mubao_list_table">
      <page-table-new
        :tableData="tableData"
        :total="total"
        :featchData="featchData"
        :defaultSort="{ prop: 'modifyTime', order: 'descending' }"
        :tableColumns="tableColumns"
        @pageChange="handlePageChange"
        @sortChange="handleSortChange"
      >
      <!-- 类型 -->
      <template #clienttype="scope">
        <div>
          <span v-if="scope.row.clienttype === 0">PC</span>
          <span v-if="scope.row.clienttype === 1">安卓</span>
          <span v-if="scope.row.clienttype === 2">IOS</span>
        </div>
      </template>
      <!-- 游戏分组 -->
      <template #gamegroupname="scope">
        <span> {{scope.row.gamegroupname}} （{{ scope.row.gamegroupid }}） </span>
      </template>
      <!-- 状态 -->
      <template #enablestat="scope">
        <div v-if="scope.row.enablestat === 1">
          <span style="background: #56A500;" class="status_tag"></span
          ><span>启用</span>
        </div>
        <div v-if="scope.row.enablestat === 2">
          <span class="status_tag"></span
          ><span>禁用</span>
        </div>
        <div v-if="scope.row.enablestat === 3">
          <span style="background: #777;" class="status_tag"></span
          ><span>失效</span>
        </div>
      </template>
      <!-- 母包地址 -->
      <template #officialurl="scope">
      <div>
        <span class="table_btn" @click="download(scope.row.officialurl)">
          下载
        </span>
        <span class="table_btn" @click="copyText(scope.row.officialurl)">
          复制
        </span>
      </div>
      </template>
    
     <!-- 创建时间 -->
      <template #createdat="scope">
        <div>
          <span>{{ dateFormat(scope.row.createdat) }}</span>
        </div>
      </template>
      <!-- 备注 -->
      <template #remark="scope">
        <div>
          <span v-if="scope.row.remark">{{ scope.row.remark }}</span>
          <span v-else> - </span>
        </div>
      </template>
      <template #action="scope">
        <div class="action_column">
            <i
              title="查看"
              class="iconfont icon-chakan"
              style="font-size: 18px;"
              @click="previewItem(scope.row)"
            ></i>
            <i
              v-if="roleType === '3' && scope.row.enablestat !== 3"
              style="font-size: 18px;"
              class="iconfont icon-bianji"
              @click="editItem(scope.row)"
              title="编辑"
            ></i>
            <el-popconfirm
              @onConfirm="confirmEnable(scope.row)"
              v-if="scope.row.enablestat === 2 && roleType === '3' && scope.row.enablestat !== 3"
              title="确定启用该方案吗？"
            >
              <i
                slot="reference"
                class="iconfont icon-qiyong"
                style="font-size: 18px;"
                title="启用"
              ></i>
            </el-popconfirm>
            <el-popconfirm
              @onConfirm="confirmDisable(scope.row)"
              v-if="scope.row.enablestat === 1 && roleType === '3' && scope.row.enablestat !== 3"
              title="确定禁用该方案吗？"
            >
              <i
                title="禁用"
                slot="reference"
                class="iconfont icon-jinyong"
                style="font-size: 18px;"
              ></i>
            </el-popconfirm>
        </div>
      </template>
      </page-table-new>
    </div>
  </div>
</template>

<script>
import pageTableNew from "@com/tableNew";
import { getPageDtoByPageIndex,getGameGroupList,enabledPackage } from "@/api/mubao";
 
import {  MUBAO_TABLE_COLUMNS,CHILD_TYPE_OPTIONS, } from "../const";
import { formatDate } from "@/utils/validate";
import { copyText,downFile } from "@/utils/index";
import { getCookie } from "@/utils/auth";
export default {
  name: "extensionMubao",
  components: { pageTableNew },
  data() {
    return {
      groupsOption: [],
      roleType: getCookie("roleType"),
      featchData: {
        pageSize: 20,
        pageStart: 1,
        gameGroupId: '', //游戏分组id
        name:'',    //推广商名称
        dateTime: [], //时间区间
        clientType:'',  //类型
        query: "" //母包标识名称/创建人
      },
      typeOption: CHILD_TYPE_OPTIONS, //类型
      tableData: [],
      tableColumns: MUBAO_TABLE_COLUMNS,
      total: 0
    };
  },
  created() {
    this.getGameGroupList();
    this.searchData();
  },
  computed: {
    dateFormat(){
      return function(date){
        if(date){
          return formatDate(new Date(date),'yyyy-MM-dd')
        }
      }
    }
  },
  methods: {
    // 查看母包详情
    previewItem(item) {
      var view = {
        meta:{
          module: "extensionMubao",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/mubaodetail",
        name: "extensionMubao",
        path: "/extension/mubaodetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/mubaodetail",
          query: {
            type: "detail",
            id:item.id
          }
        });
      })
    },
    // 编辑母包
    editItem(item) {
      var view = {
        meta:{
          module: "extensionMubao",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/mubaodetail",
        name: "extensionMubao",
        path: "/extension/mubaodetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/mubaodetail",
          query: {
            type: "edit",
            id:item.id
          }
        });
      })
    },
    // 创建母包
    createItem() {
      var view = {
        meta:{
          module: "extensionMubao",
          parent: "extension",
          title: "母包",
        },
        fullPath: "/extension/mubaodetail",
        name: "extensionMubao",
        path: "/extension/mubaodetail"
      }
      this.$store.dispatch('tagsView/delView', view).then(() => {
        this.$router.push({
          path: "/extension/mubaodetail",
          query: {
            type: "create"
          }
        });
      })
    },
    //确认启用
    confirmEnable(item) {
      enabledPackage({id:item.id,data:1}).then((res)=>{
        if(res.code === 0){
          this.$message({
            message: "启用成功",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error({type: res.message});
        }
      })
    },
    //确认禁用
    confirmDisable(item) {
      enabledPackage({id:item.id,data:2}).then((res)=>{
        if(res.code === 0){
          this.$message({
            message: "禁用成功",
            type: "success"
          });
          this.searchData();
        }else{
          this.$message.error({type: res.message});
        }
      })
    },
    //重新搜索
    resetData() {
      this.featchData = {
        pageSize: 20,
        pageStart: 1,
        gameGroupId: '', 
        dateTime: [], 
        clientType:'',
        name:'', 
        query: ""
      };
      this.$nextTick(()=>{
        this.searchData();
      })
    },
    searchData() {
      let params = {
        page: this.featchData.pageStart,
        pagesize: this.featchData.pageSize,
        startAt: this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'',
        endAt: this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'',
        clientType: this.featchData.clientType,
        gameGroupId:this.featchData.gameGroupId,
        query: this.featchData.query,
        name: this.featchData.name,
      };
      getPageDtoByPageIndex(params).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.values;
      });
    },
    handlePageChange(value) {
      this.featchData.pageSize = value.pageSize;
      this.featchData.pageStart = value.pageStart;
      this.searchData();
    },
    handleSortChange() {},
    getGameGroupList(){
      this.featchData.startAt = this.featchData.dateTime[0]?new Date(this.featchData.dateTime[0]).getTime():'';
      this.featchData.endAt = this.featchData.dateTime[1]?new Date(this.featchData.dateTime[1]).getTime():'';
      getGameGroupList().then((res)=>{
        let arr = [
          {
            id: 'id',
            name: "游戏分组：全部",
            label: "全部"
          }
        ];
        res.data.forEach(x => {
          arr.push({
            id: x.id,
            name: `游戏分组：${x.groupname}`,
            label: x.groupname
          });
        });
        this.groupsOption = arr;
      })
    },
    copyText(text){
      copyText(text,()=>{
        this.$message({
          message: "复制成功",
          type: "success"
        });
      });
    },
    download(url){
      console.log(url);
      downFile(url);
    }
  }
};
</script>

<style lang="scss" scoped>
.mubao_list {
  .mubao_list_search {
    .search_box {
      display: inline-block;
      vertical-align: top;
      margin-right: 6px;
      margin-bottom: 16px;
      .reset_btn {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #777777;
        text-align: justify;
        margin-left: 12px;
        cursor: pointer;
      }
    }
  }
  .mubao_list_table {
    background: #ffffff;
    box-shadow: 0 0 6px 0 rgba(0, 21, 41, 0.09);
    border-radius: 4px;
    padding: 16px 16px 0 16px;
    margin: 0 0 16px 0;
    .status_tag {
      display: inline-block;
      height: 6px;
      width: 6px;
      border-radius: 50%;
      background: #cf0d17;
      margin-right: 6px;
      position: relative;
      top: -2px;
    }
    .red_button {
      margin-left: 4px;
    }
    .table_btn {
      display: inline-block;
      box-sizing: border-box;
      height: 22px;
      line-height: 20px;
      width: 40px;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #06367c;
      color: #06367c;
      cursor: pointer;
    }
    .action_column {
      i {
        color: var(--themeColor);
        margin-right: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>
